<template>
  <div class="activity-list">
    <div
      v-for="activity in activities"
      :key="activity.id"
      class="activity-item"
    >
      <a class="activity-link" @click.prevent="navigateToDetail(activity.id)">
        {{ activity.activityName }}
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import {
  ActivityControllerService,
  type Activity,
} from "../../../../../generated";
import { ElMessage } from "element-plus";

const activities = ref<Activity[]>([]);

onMounted(async () => {
  const activityRes = await ActivityControllerService.listActivityVoByPage({
    pageSize: 10,
    current: 1,
  });
  if (activityRes.code === 0) {
    const activityVoList = activityRes.data?.records;
    activities.value = activityVoList?.map(
      (activityVo) =>
        ({
          id: activityVo.id as number,
          title: activityVo?.activityTitle as string,
          content: activityVo?.activityContent as string,
          activityName: activityVo?.activityName as string,
        }) as Activity,
    );
  } else {
    ElMessage.error("加载数据失败" + activityRes.message);
  }
});

const router = useRouter();

//跳转到活动详情页的方法
const navigateToDetail = (id: number) => {
  router.push({
    path: "/activity/details",
    query: { activityId: id.toString() },
  });
};
</script>

<style scoped>
.activity-list {
  display: flex;
  flex-direction: column;
}

.activity-item {
  margin-bottom: 20px; /* 增加行间距 */
}

.activity-link {
  font-size: 16px;
  color: #0066cc; /* 使用典型的链接颜色 */
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.activity-link:hover {
  color: #004080; /* 鼠标悬停时的颜色变化 */
  text-decoration: underline;
}
</style>
